<template>
  <view class="page">
    <image src="@/static/appoint.png" class="bg" />
    <uv-navbar
      title="预约排班"
      placeholder
      bg-color="#fff"
      auto-back
      left-icon-color="#757575"
      title-style="color: #000000; font-size: 32rpx"
    >
      <template #right>
        <uv-text text="发送" color="#4EA770" size="28rpx" @click="handleSubmit" />
      </template>
    </uv-navbar>
    <view class="row-box">
      <view class="row-item">
        <view class="row-label">项目名称</view>
        <view class="row-value">{{ info.projectName }}</view>
      </view>
      <view class="row-item">
        <view class="row-label">期数</view>
        <view class="row-value">
          {{ info.cycleNo }}期（共{{ info.numberOfCycles }}期）
        </view>
      </view>
      <view class="row-item">
        <view class="row-label">开始日期</view>
        <view class="row-value">{{ info.planBeginTime }}</view>
      </view>
      <view class="row-item">
        <view class="row-label green">本期任务</view>
        <view class="row-value">
          总：{{ info.numberOfTasks }} 系统：{{ info.numberOfSystems }} 设备：{{
            info.numberOfDevices
          }}
        </view>
      </view>
    </view>
    <view class="form-box">
      <uv-form :model="forms" ref="form" label-width="100">
        <uv-form-item label="开始时间" required label-position="top">
          <uv-input
            v-model="forms.realityBeginTime"
            class="t20"
            readonly
            placeholder="请选择"
            suffix-icon="arrow-right"
            @click="startChoose"
          />
        </uv-form-item>
        <uv-form-item label="结束时间" required label-position="top">
          <uv-input
            v-model="forms.realityEndTime"
            class="t20"
            readonly
            placeholder="请选择"
          />
        </uv-form-item>
        <uv-form-item label="一消工程师" required label-position="top">
          <g-select
            v-model:value="forms.engineerId"
            :list="engineerList"
            mode="checkbox"
            key-value="userId"
            key-name="nickName"
            title="选择一消工程师"
            :disabled-id="info.projectLeader"
            style="width: 100%"
          />
        </uv-form-item>
        <uv-form-item label="操作人员" required label-position="top">
          <g-select
            v-model:value="forms.operatorId"
            :list="operatorList"
            mode="checkbox"
            key-value="userId"
            key-name="nickName"
            title="选择操作人员"
            style="width: 100%"
          />
        </uv-form-item>
        <uv-form-item label="客户预约详情" labelPosition="top">
          <uv-textarea
            v-model="forms.details"
            class="t20"
            placeholder="请输入预约详情"
            maxlength="200"
          />
        </uv-form-item>
      </uv-form>
    </view>
    <uv-datetime-picker
      ref="startDateRef"
      v-model="realityBeginTime"
      mode="date"
      :maxDate="maxDate"
      :minDate="minDate"
      @confirm="startConfirm"
    />
  </view>
</template>
<script setup>
import { reactive, ref, computed } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { timeFormat } from "@/common/mothed.js";
import { planDetails, userList, planAppoint } from "@/request/home.js";

const startDateRef = ref(); // 开始时间弹窗ref
const minDate = ref(null);
const maxDate = ref(null);
const realityBeginTime = ref(timeFormat(Number(new Date())));
const forms = reactive({
  id: null,
  realityBeginTime: timeFormat(Number(new Date())),
  realityEndTime: timeFormat(Number(new Date())),
  engineerId: [], // 一消工程师id
  operatorId: [], // 操作员id
  details: "", // 预约详情
});
const info = ref({}); // 项目信息
const engineerList = ref([]); // 一消工程师列表
const operatorList = ref([]); // 操作员列表

onLoad(async (e) => {
  forms.realityEndTime = e.timeEnd;
  forms.id = e.id;
  realityBeginTime.value = e.timeStart;
  forms.realityBeginTime = e.timeStart;
  let time = new Date(e.timeStart); //当前月 要计算其他时间点自己传入即可
  let year = time.getFullYear();
  let month = parseInt(time.getMonth() + 1);

  //开始时间 时间戳
  let start = new Date(year + "-" + month + "-01 00:00:00").getTime();
  //结束时间 时间戳
  if (month == 12) {
    month = 0;
    year += 1;
  }
  let end = new Date(year, month, 1).getTime() - 1;
  minDate.value = start;
  maxDate.value = end;

  await getDetails();
  getEngineerList();
  getOperatorList();
});

// 获取排班详情
const getDetails = async () => {
  const res = await planDetails(forms.id);
  if (res.code == 200) {
    info.value = res.data;
  }
};

// 获取人员列表
const getEngineerList = () => {
  userList("03").then((res) => {
    if (res.code == 200) {
      engineerList.value = res.data;
      if (info.value.engineerId) {
        forms.engineerId = info.value.engineerId.split(",").map((i) => parseInt(i));
      }
    }
  });
};

// 获取操作人员列表
const getOperatorList = () => {
  userList("04").then((res) => {
    if (res.code == 200) {
      operatorList.value = res.data;
      if (info.value.operatorId) {
        forms.operatorId = info.value.operatorId.split(",").map((i) => parseInt(i));
      }
    }
  });
};

// 打开时间选择器
const startChoose = () => {
  startDateRef.value.open();
};

// 确定时间
const startConfirm = (e) => {
  forms.realityBeginTime = timeFormat(e.value);
};

// 提交排班信息
const handleSubmit = () => {
  if (forms.engineerId.length == 0) {
    uni.showToast({
      title: "请选择工程师",
      icon: "none",
    });
    return;
  }
  if (forms.operatorId.length == 0) {
    uni.showToast({
      title: "请选择操作人员",
      icon: "none",
    });
    return;
  }
  let data = Object.assign({}, forms);
  data.realityBeginTime = data.realityBeginTime + " 00:00:00";
  data.realityEndTime = data.realityEndTime + " 23:59:59";
  data.engineerId = data.engineerId.join(",");
  data.operatorId = data.operatorId.join(",");
  planAppoint(data).then((res) => {
    if (res.code == 200) {
      uni.showToast({
        title: "发送成功",
        icon: "none",
        success: () => {
          setTimeout(() => {
            uni.navigateBack({
              delta: 1,
            });
          }, 1000);
        },
      });
    }
  });
};
</script>
<style lang="scss" scoped>
@import "@/uni.scss";
.page {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  .bg {
    width: 100%;
    height: 24vh;
    position: fixed;
    top: 0;
    z-index: -10;
  }
  .row-box {
    color: #212121;
    font-size: 28rpx;
    margin: 40rpx;
    text-align: center;
    border-radius: 20rpx;
    background-color: #fff;
    box-shadow: 0 6rpx 20rpx 2rpx rgba(127, 127, 127, 0.16);
    .row-item {
      display: flex;
      align-items: center;
      padding: 28rpx 40rpx;
      border-bottom: 1rpx solid #dedede;
      &:last-child {
        border-bottom: none;
      }
      .row-label {
        color: #757575;
        width: 180rpx;
        text-align: left;
      }
      .row-value {
        text-align: left;
      }
      .green {
        color: #4ea770;
      }
    }
  }
  .k {
    margin-top: 14rpx;
  }
}
.form-box {
  font-size: 28rpx;
  padding: 20rpx 40rpx;
  margin: 20rpx 40rpx;
  border-radius: 20rpx;
  box-sizing: border-box;
  background-color: #fff;
  box-shadow: 0 6rpx 20rpx 2rpx rgba(127, 127, 127, 0.16);
  .t20 {
    margin-top: 20rpx;
  }
}
</style>
